<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>物料批次库存</span>
      </div>
      <div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="物料编码">
            <el-input placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="物料名称">
            <el-input placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="批次号">
            <el-input placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search">查询</el-button>
            <el-button type="warning" icon="el-icon-download">导出</el-button>
          </el-form-item>
        </el-form>
        
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="code" label="物料编码" width="120"></el-table-column>
          <el-table-column prop="name" label="物料名称" width="150"></el-table-column>
          <el-table-column prop="spec" label="规格型号" width="120"></el-table-column>
          <el-table-column prop="batch" label="批次号" width="120"></el-table-column>
          <el-table-column prop="quantity" label="库存数量"></el-table-column>
          <el-table-column prop="unit" label="单位" width="80"></el-table-column>
          <el-table-column prop="cost" label="单位成本" width="100"></el-table-column>
          <el-table-column prop="amount" label="金额" width="100"></el-table-column>
          <el-table-column prop="quality" label="质量状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.quality === '合格' ? 'success' : 'danger'">
                {{ scope.row.quality }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="produceDate" label="生产日期" width="120"></el-table-column>
          <el-table-column prop="validDate" label="有效期至" width="120"></el-table-column>
          <el-table-column label="操作" width="100" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleDetail(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'StkInventoryMb',
  data() {
    return {
      tableData: [
        {
          code: 'M001',
          name: 'A型原材料',
          spec: '100*100*1.0',
          batch: '20240420-01',
          quantity: 500,
          unit: '件',
          cost: 5.5,
          amount: 2750,
          quality: '合格',
          produceDate: '2024-03-20',
          validDate: '2024-09-20'
        },
        {
          code: 'M001',
          name: 'A型原材料',
          spec: '100*100*1.0',
          batch: '20240423-01',
          quantity: 500,
          unit: '件',
          cost: 5.5,
          amount: 2750,
          quality: '合格',
          produceDate: '2024-03-23',
          validDate: '2024-09-23'
        },
        {
          code: 'M002',
          name: 'B型半成品',
          spec: '200*50*2.0',
          batch: '20240421-01',
          quantity: 300,
          unit: '个',
          cost: 10.8,
          amount: 3240,
          quality: '待检',
          produceDate: '2024-03-21',
          validDate: '2024-12-21'
        }
      ]
    }
  },
  methods: {
    handleDetail(row) {
      this.$message.success('查看批次详情: ' + row.name + ' (' + row.batch + ')')
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style> 